<div id="top-left">
  <span class="location-title">工单</span>
</div>
<div class="main-content">
  <ul nz-menu nzMode="horizontal" class="location-menu">
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/work/order']">
      工单查询
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/work/submit']">
      提交工单
    </li>
  </ul>
  <form style="max-width: 800px;" nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="urgent">优先级</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请选择优先级!">
        <nz-radio-group formControlName="urgent">
          <label nz-radio [nzValue]="1">一般</label>
          <label nz-radio [nzValue]="2">紧急</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="content">问题描述</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请输入问题描述!">
        <textarea rows="4" nz-input formControlName="content"></textarea>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="phone">联系方式</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="请输入联系方式!">
        <input type="text" nz-input formControlName="phone" placeholder="联系方式" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="images">问题截图</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <nz-upload [nzAction]="uploadUrl" [nzHeaders]="headers" nzListType="picture-card" nzName="capture"
          [(nzFileList)]="imageList" [nzShowButton]="imageList.length < 8" [nzPreview]="handlePreview"
          [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event)">
          <div>
            <i nz-icon nzType="plus"></i>
            <div style="margin-top: 8px">上传</div>
          </div>
        </nz-upload>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzSpan]="16" [nzOffset]="4">
        <button nz-button [nzType]="'primary'">提交</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
  (nzOnCancel)="previewVisible = false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
  </ng-template>
</nz-modal>
